<template>
	<div class="login-container">
		<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
			label-position="left">
			<div class="title-container">
				<h3 class="title">电影管理系统</h3>
				<p class="subtitle">请登录您的账号</p>
			</div>

			<el-form-item prop="username">
				<el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username" type="text"
					tabindex="1" autocomplete="on" prefix-icon="el-icon-user" />
			</el-form-item>

			<el-form-item prop="password">
				<el-input ref="password" v-model="loginForm.password" :type="passwordVisible ? 'text' : 'password'"
					placeholder="密码" name="password" tabindex="2" autocomplete="on" prefix-icon="el-icon-lock"
					@keyup.enter.native="handleLogin">
					<i slot="suffix" :class="passwordVisible ? 'el-icon-view' : 'el-icon-hide'"
						@click="passwordVisible = !passwordVisible" />
				</el-input>
			</el-form-item>

			<div class="login-options">
				<el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
				<el-button type="text" @click="handleForgotPassword">忘记密码？</el-button>
			</div>

			<el-button :loading="loading" type="primary" class="login-button" @click.native.prevent="handleLogin">
				{{ loading ? '登录中...' : '登录' }}
			</el-button>
		</el-form>
	</div>
</template>

<script>
	import $request from '@/util/request';

	export default {
		name: 'LoginView',
		data() {
			const validateUsername = (rule, value, callback) => {
				if (!value) {
					callback(new Error('请输入用户名'))
				} else {
					callback()
				}
			}
			return {
				loginForm: {
					username: '',
					password: '',
					remember: false
				},
				loginRules: {
					username: [{
						required: true,
						trigger: 'blur',
						validator: validateUsername
					}],
					// password: [{ required: true, trigger: 'blur', validator: validatePassword }]
				},
				passwordVisible: false,
				loading: false,
				redirect: undefined
			}
		},
		created() {
			// 检查是否有记住的用户信息

		},
		watch: {
			$route: {
				handler(route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true
			}
		},
		methods: {
			/**
			 * 处理登录方法
			 */
			handleLogin() {
				let _this = this;
				$request.get('/user/login?username=' + this.loginForm.username + "&&password=" + this.loginForm.password)
					.then(function(response) {
						// 处理成功情况						
						console.log(response.data.code);
						if (response.data.code == 500) {
							console.log("登录失败");
						} else {
							console.log("登录成功");
							localStorage.setItem("myToken", response.data.results);
							_this.$router.push({
								path: '/'
							})
						}
					})
					.catch(function(error) {
						// 处理错误情况
						console.log(error);
					})
					.finally(function() {
						// 总是会执行
					});
				// localStorage.setItem('userInfo', JSON.stringify(this.loginForm));

			},
			handleForgotPassword() {
				this.$message.info('请联系系统管理员重置密码')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/styles/variables.scss';

	.login-container {
		min-height: 100vh;
		width: 100%;

		@include themed() {
			background-color: t('bg-color');
		}

		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;

		.login-form {
			position: relative;
			width: 520px;
			max-width: 100%;
			padding: 40px 35px;
			margin: 0 auto;
			overflow: hidden;

			@include themed() {
				background-color: t('card-bg-color');
			}

			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

			.title-container {
				position: relative;
				text-align: center;
				margin-bottom: 40px;

				.title {
					font-size: 26px;

					@include themed() {
						color: t('text-color');
					}

					margin: 0;
					font-weight: bold;
				}

				.subtitle {
					font-size: 14px;

					@include themed() {
						color: t('text-secondary-color');
					}

					margin: 10px 0 0;
				}
			}

			.el-input {
				display: inline-block;
				height: 47px;
				width: 100%;
				margin-bottom: 20px;

				input {
					background: transparent;

					@include themed() {
						border: 1px solid t('border-color');
						color: t('text-color');
					}

					border-radius: 4px;
					height: 47px;
					padding: 12px 5px 12px 15px;
					-webkit-appearance: none;
					border-radius: 4px;
					transition: all 0.3s;

					&:focus {
						@include themed() {
							border-color: t('primary-color');
							box-shadow: 0 0 0 2px rgba(t('primary-color'), 0.1);
						}
					}

					&::placeholder {
						@include themed() {
							color: t('text-secondary-color');
						}
					}
				}

				.el-input__prefix {
					left: 10px;

					@include themed() {
						color: t('text-secondary-color');
					}
				}

				.el-input__suffix {
					right: 10px;

					@include themed() {
						color: t('text-secondary-color');
					}

					cursor: pointer;
					transition: color 0.3s;

					&:hover {
						@include themed() {
							color: t('primary-color');
						}
					}
				}
			}

			.login-options {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;

				.el-checkbox {
					@include themed() {
						color: t('text-secondary-color');
					}
				}

				.el-button--text {
					@include themed() {
						color: t('primary-color');
					}

					font-size: 14px;
					transition: color 0.3s;

					&:hover {
						@include themed() {
							color: rgba(t('primary-color'), 0.8);
						}
					}
				}
			}

			.login-button {
				width: 100%;
				height: 47px;

				@include themed() {
					background: linear-gradient(135deg, t('primary-color') 0%, rgba(t('primary-color'), 0.8) 100%);
					box-shadow: 0 2px 6px rgba(t('primary-color'), 0.2);
				}

				border: none;
				transition: all 0.3s;
				font-size: 16px;

				&:hover {
					transform: translateY(-1px);

					@include themed() {
						box-shadow: 0 4px 12px rgba(t('primary-color'), 0.3);
					}
				}

				&:active {
					transform: translateY(0);
				}

				&.is-loading {
					@include themed() {
						background: linear-gradient(135deg, rgba(t('primary-color'), 0.8) 0%, t('primary-color') 100%);
					}
				}
			}
		}
	}
</style>